<template>
	<view>
		<ker-swiper-preview
			:list="picList"
			:kerMode="dotMode"
			:autoplay="autoplay"
			:isAuto='heightAuto'
			:interval="2000"
		>
		</ker-swiper-preview>
		<view class="exm_card">
			 <view class="exm_card_list">
					<view>自动轮播</view>
					<switch checked @change="autoChange" />
				</view>
		</view>
		<view class="exm_card">
			 <view class="exm_card_list">
					<view>swiper高度自适应</view>
					<switch  @change="heightChange" />
				</view>
		</view>
		
		<view class="exm_card">
			<view>指示点</view>
			<radio-group @change="radioChange" class="auto_radio">
				<label v-for="(item, index) in dotList" :key="item.id" class="label_panel">
					<view>
					 <radio :value="item.val" :checked="index === current" />
					</view>
					<view>{{item.val}}</view>
				</label>
			</radio-group>
		</view>
	</view>
</template>

<script>
	import kerSwiperPreview from "@/components/ker-swiper-preview/ker-swiper-preview"
	export default {
		components:{ kerSwiperPreview },
		data() {
			return {
				picList: [
					{
						id: 0,
						text:'0000',
						img: "https://youimg1.c-ctrip.com/target/0102a120008jz4xuc0045.jpg",
						video: 'https://video.c-ctrip.com/videos/K7061r000001hyxz74AF0.mp4'
					},
					{
						id: 1,
						text:'1111',
						img: "https://youimg1.c-ctrip.com/target/01A08120008qqzbxl1629_R_800_10000_Q90.jpg",
						video: null
					},
					{
						id: 2,
						text:'222',
						img: "https://youimg1.c-ctrip.com/target/01A0q120008qqyzbi5887_R_800_10000_Q90.jpg",
						video: null
					},
					{
						id: 3,
						text:'eee',
						img: "https://youimg1.c-ctrip.com/target/01A58120008qqyrpeF593_R_800_10000_Q90.jpg",
						video: null
					},
					{
						id: 4,
						text:'ttt',
						img: "https://youimg1.c-ctrip.com/target/01A2m120008qqzwdkE0E7_R_800_10000_Q90.jpg",
						video: null
					},
					{
						id: 5,
						text:'1111',
						img: "https://youimg1.c-ctrip.com/target/01A66120008qqz0msC862_R_800_10000_Q90.jpg",
						video: null
					},
					{
						id: 6,
						text:'1111',
						img: "https://youimg1.c-ctrip.com/target/01A6r120008shs7ouB831_R_800_10000_Q90.jpg",
						video: null
					},
				],
				dotList: [
					{id: 0,val: 'default'},
					{id: 1,val: 'round'},
					{id: 2,val: 'dot'},
					{id: 3,val: 'indexes'},
					{id: 4,val: 'nav'},
					{id: 5,val: 'capsule'},
				],
				current: 0,
				autoplay: true,
				dotMode: "default",
				heightAuto: false
			}
		},
		methods: {
			/* 自动播放控制 */
			autoChange(e) {
				if(e.target.value===true){
					this.autoplay = true
				} else {
					this.autoplay = false
				}
			},
			/* swiper高度是否自适应 */
			heightChange(e) {
				if(e.target.value===true){
					this.heightAuto = true
				} else {
					this.heightAuto = false
				}
				this.$forceUpdate()
			},
			/* 指示点变换 */
			radioChange: function(evt) {
				for (let i = 0; i < this.dotList.length; i++) {
					if (this.dotList[i].val === evt.detail.value) {
						this.current = i;
						this.dotMode = evt.detail.value
						break;
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
		uni-page-body,uni-view,body, html,uni-page,uni-app,uni-page-wrapper{
		&::-webkit-scrollbar {
			width: 0!important;
			height: 0!important;
			color: transparent!important;
			display: none;
		}
	}
	.exm_card{
		background: #fff;
		padding: 10px 40px;
		box-sizing: border-box;
		margin-top: 20px;
		.label_panel{
			display: flex;
			justify-content: flex-start;
			margin-top: 20rpx;
		}
		.exm_card_list{
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}
	.auto_radio{
		.uni-label-pointer{
			display: flex;
			justify-content: flex-start;
			margin-top: 14px;
		}
	}
</style>

